<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />

        <!-- 个人信息 -->
        <input
            type="file"
            hidden
            accept="image/*"
            ref="file"
            @change="onChangeFile"
        />

        <van-cell title="头像" center is-link @click="$refs.file.click()">
            <van-image
                width="30"
                height="30"
                round
                fit="cover"
                :src="user.photo"
            />
        </van-cell>
        <van-cell
            title="昵称"
            is-link
            :value="user.name"
            @click="isEditNameShow = true"
        />
        <van-cell
            title="性别"
            is-link
            :value="user.gender === 0 ? '男' : '女'"
            @click="isEditGenderShow = true"
        />
        <van-cell
            title="生日"
            is-link
            :value="user.birthday"
            @click="isEditBirthdayShow = true"
        />

        <!-- 编辑昵称弹出层 -->
        <van-popup
            v-model="isEditNameShow"
            position="bottom"
            :style="{ height: '100%' }"
        >
            <update-name
                v-if="isEditNameShow"
                @close="isEditNameShow = false"
                :name="user.name"
                @update-name="user.name = $event"
            />
        </van-popup>

        <!-- 编辑性别弹出层 -->
        <van-popup v-model="isEditGenderShow" position="bottom">
            <!--
                传递给子组件的数据既要使用也要修改时，例如 name，
                可以使用 v-model
             -->
            <!--
                v-model="user.name"
                默认传递一个 value 数据 :value="user.name"
                默认监听 input 事件  @input="user.name = $event"
            -->

            <!-- <update-gender
                v-if="isEditGenderShow"
                @close="isEditGenderShow = false"
                :name="user.name"
                @update-name="user.name = $event"
            /> -->
            <update-gender
                v-if="isEditGenderShow"
                @close="isEditGenderShow = false"
                v-model="user.gender"
            />
        </van-popup>

        <!-- 修改生日弹出层 -->
        <van-popup v-model="isEditBirthdayShow" position="bottom">
            <update-birthday
                v-if="isEditBirthdayShow"
                v-model="user.birthday"
                @close="isEditBirthdayShow = false"
            />
        </van-popup>

        <!-- 修改头像弹出层 -->
        <van-popup
            class="photo-popup"
            v-model="isEditPhotoShow"
            position="bottom"
            style="height: 100%"
        >
            <update-photo
                v-if="isEditPhotoShow"
                @close="isEditPhotoShow = false"
                :file="previewImage"
                @update-photo="user.photo = $event"
            />
        </van-popup>
    </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday'
import UpdatePhoto from './components/update-photo'

export default {
    components: {
        UpdateName,
        UpdateGender,
        UpdateBirthday,
        UpdatePhoto
    },
    props: {},
    data () {
        return {
            // 用户个人信息
            user: {},
            // 控制编辑昵称弹出层是否显示
            isEditNameShow: false,
            // 控制编辑性别弹出层是否显示
            isEditGenderShow: false,
            // 控制编辑生日弹出层是否显示
            isEditBirthdayShow: false,
            // 控制编辑头像弹出层是否显示
            isEditPhotoShow: false,
            // 图片预览
            previewImage: null
        }
    },
    created () {
        this.loadUserProfile()
    },
    computed: {},
    methods: {
        async loadUserProfile () {
            const { data: res } = await getUserProfile()
            // console.log(res)
            this.user = res.data
        },
        // 选择文件改变时触发
        onChangeFile () {
            // 获取选中的图片
            const file = this.$refs.file.files[0]

            this.previewImage = file

            // console.log(file)

            this.isEditPhotoShow = true

            // 为了解决相同文件不触发 change 事件，所以在这里手动的清空 file 的 value
            this.$refs.file.value = ''
        }
    },
    watch: {}
}
</script>

<style scoped>
.van-popup {
    background-color: #f5f7f9;
}
.photo-popup {
    background-color: #000;
}
</style>
